<template>
  <div class="annual-leave-management-container">
    <span class="print-btn">
      <!-- <router-link style="" to="/main/renshi/jiaqiguanli">返回</router-link> -->
      <el-button type="primary" @click="$router.push('/main/renshi/jiaqiguanli')" icon="el-icon-back">返回</el-button>
      <el-button type="info" icon="el-icon-printer" @click="printForm"
        >打印</el-button
      >
    </span>

    <div class="page">
      <h2 class="company-name">深圳市艾美思普科技有限公司</h2>
      <h2 class="title">年假管理规定</h2>
      <div class="meta-info">
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">文件编号：{{ meta.fileNumber }}</p>
          <input
            v-else
            v-model="meta.fileNumber"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">文件版本：{{ meta.version }}</p>
          <input
            v-else
            v-model="meta.version"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">编制部门：{{ meta.department }}</p>
          <input
            v-else
            v-model="meta.department"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta">生效日期：{{ meta.effectiveDate }}</p>
          <input
            v-else
            v-model="meta.effectiveDate"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
      </div>
      <div>
        <div
          style="
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            line-height: 30px;
          "
        >
          <div @dblclick="editApproval = true">
            <label v-if="!editApproval"
              ><span>批准：{{ approvalPerson }}</span>
              <span
                >日期：{{ approvalDate.year }}年{{ approvalDate.month }}月{{
                  approvalDate.day
                }}日</span
              ></label
            >
            <label v-else>
              <span
                >批准：<input
                  type="text"
                  v-model="approvalPerson"
                  style="width: 100px"
                  @blur="editApproval = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="approvalDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="approvalDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="approvalDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
          <div @dblclick="editReview = true">
            <label v-if="!editReview"
              ><span>审核：{{ reviewer }}</span>
              <span
                >日期：{{ reviewDate.year }}年{{ reviewDate.month }}月{{
                  reviewDate.day
                }}日</span
              ></label
            >
            <label v-else>
              <span
                >审核：<input
                  type="text"
                  v-model="reviewer"
                  style="width: 100px"
                  @blur="editReview = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="reviewDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="reviewDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="reviewDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
          <div @dblclick="editCompilation = true">
            <label v-if="!editCompilation"
              ><span>编制：{{ compilationPerson }}</span>
              <span
                >日期：{{ compilationDate.year }}年{{
                  compilationDate.month
                }}月{{ compilationDate.day }}日</span
              ></label
            >
            <label v-else>
              <span
                >编制：<input
                  type="text"
                  v-model="compilationPerson"
                  style="width: 100px"
                  @blur="editCompilation = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="compilationDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="compilationDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="compilationDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
        </div>
        <!-- <p>文件编号：WI-A-JY-41</p>
      <p>文件版本：B/0</p>
      <p>编制部门：企业管理部</p>
      <p>生效日期：2015-01-01</p>
      <p>批准：</p>
      <p>审核：</p>
      <p>编制：</p>
      <p>日期：  年  月  日  年  月  日  年  月  日</p> -->
      </div>
      <div class="revision-record">
        <h3>修订记录</h3>
        <button @click="addclick">新增</button>
        <table border="1">
          <thead>
            <tr>
              <th>版本</th>
              <th>生效日期</th>
              <th>修订内容摘要</th>
              <th>修订部门</th>
              <th>修订人</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(xd, index) in xiuding" :key="index">
              <td>
                <input
                  style="width: 60px; border: none"
                  type="text"
                  v-model="xd.banben"
                />
              </td>
              <td>
                <input style="border: none" type="date" v-model="xd.sxdate" />
              </td>
              <td>
                <input
                  style="width: 120px; border: none"
                  type="text"
                  v-model="xd.zhaiyao"
                />
              </td>
              <td>
                <input
                  style="width: 80px; border: none"
                  type="text"
                  v-model="xd.bumeng"
                />
              </td>
              <td>
                <input
                  style="width: 100px; border: none"
                  type="text"
                  v-model="xd.xiudingren"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="note">使用前请确认是否为最新版本！</p>
    </div>
    <div class="page">
      <div class="content-section">
        <h3>1 目的：</h3>
        <p>
          为规范公司年假管理制度，加强对职员工年假的有效管理，特制订本规定。
        </p>
        <h3>2 范围：</h3>
        <p>本办法适用于深圳市艾美思普科技有限公司全体职员工。</p>
        <h3>3 职责：</h3>
        <p>3.1 企业管理部负责制定本管理制度并监控实施过程与结果。</p>
        <p>3.2 其他各部门宣导职员工按本规定实施。</p>
        <h3>4 定义：</h3>
        <p>年假：指职员工以在公司服务年限为依据，所享受的年度休假时间</p>
        <h3>5 内容：</h3>
        <h4>5.1 年假时间规定：</h4>
        <p>
          进入公司起算，凡在公司连续工作满一年工龄者，依一年工龄给予一天特别休假，即年假，二年给予二天，依此类推，最长休假不超过14天（含14天），休假期间基本工资照计；
        </p>
        <h4>5.2 年假的实施：</h4>
        <p>
          5.2.1
          年假的休假日期指的是本年度休上一年度的年休假，休假人不得提前休本年度的年假，同时不可跨年度进行休假，本年度未休完视作休完处理，次年度不再安排调休年假；特殊情况如因公司原因导致本年度内未能休完年假，则由公司统一安排往下一年度延休或依据年假天数给予核算薪资，具体以公司发放的通知或相关要求为准。
        </p>
        <p>
          5.2.2
          所有年休假休假前必须经部门负责人同意、公司审批后方可进行年休假的实施。
        </p>
        <h4>5.3 年假的管理：</h4>
        <p>
          5.3.1
          年休假由公司视生产及管理状况统一安排休假，部门及个人不得随意进行年休假的调休；年休假公司一般安排在生产淡季或春节期间，具体以公司统一安排的通知为准。
        </p>
        <p>
          5.3.2
          所有年休假人员需按考勤管理规定填写请假条并注明为年休假，以此作为考勤核算的依据，并按正常出勤时间核算薪资。
        </p>
      </div>
      <div class="attachments-section">
        <h3>6 附件、相关文件及表单：</h3>
        <p>6.1 相关文件：（无）</p>
        <p>6.2 相关表单：</p>
        <p>6.2.1 《请假单》</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xiuding: [
        {
          banben: "1",
          sxdate: "2000-02-02",
          zhaiyao: "1",
          bumeng: "1",
          xiudingren: "1",
        },
      ],
      meta: {
        fileNumber: "AM-A-JY-41",
        version: "B/0",
        department: "企业管理部",
        effectiveDate: "2015-01-01",
      },
      approvalPerson: "", //批准
      reviewer: "", //审核
      compilationPerson: "", //编制
      approvalDate: { year: "", month: "", day: "" },
      reviewDate: { year: "", month: "", day: "" },
      compilationDate: { year: "", month: "", day: "" },

      editMeta: false,
      editApproval: false,
      editReview: false,
      editCompilation: false,
    };
  },
  methods: {
    printForm() {
      window.print();
    },
    addclick() {
      this.xiuding.push({
        banben: "",
        sxdate: "",
        zhaiyao: "",
        bumeng: "",
        xiudingren: "",
      });
    },
  },
};
</script>

<style scoped>
.annual-leave-management-container {
  max-width: 210mm;
  margin: 0px auto;
  padding: 20px;
  border-radius: 10px;
  font-family: "宋体";
  text-align: left;
  min-height: 100vh;
}

.page {
  width: 210mm;
  height: 297mm;
  padding: 15mm;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  page-break-after: always;
  text-align: left;
  line-height: 29.3326px;
  letter-spacing: 0.1039em;
  margin-top: 20px;
}
.print-btn {
  display: flex;
  justify-content: space-between;
}

@media print {
  .annual-leave-management-container {
    width: 100%;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .page {
    box-shadow: none;
    border: none;
  }

  .print-btn {
    display: none;
  }

  body {
    font-family: "宋体";
  }
}
.company-name {
  text-align: center;
  font-size: 24px;
  color: #333;
  /* margin-bottom: 10px; */
}

.title {
  text-align: center;
  font-size: 20px;
  color: #007bff;
  /* margin-bottom: 20px; */
}
h2{
  padding-top: 0px;
}
.meta-info {
  margin-bottom: 20px;
  line-height: 2em;
  text-align: center;
}

.revision-record {
  margin-bottom: 20px;
}

.revision-record h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.revision-record table {
  width: 100%;
  border-collapse: collapse;
}

.revision-record table th,
.revision-record table td {
  border: 1px solid #ddd;
  padding: 3px;
  text-align: center;
}

.note {
  margin-bottom: 20px;
  color: #db7c7c;
  font-size: 1.3em;
  text-align: center;
}
label {
  display: flex;
  flex-direction: column;
}
.content-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.content-section h4 {
  font-size: 16px;
  color: #333;
  margin-top: 15px;
  margin-bottom: 10px;
}

.content-section p {
  line-height: 1.6;
  margin-bottom: 10px;
}

.attachments-section {
  margin-bottom: 20px;
}

.attachments-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.attachments-section p {
  line-height: 1.6;
  margin-bottom: 10px;
}
</style>